<template>
	<div class="kp-my">
		<header class="kp-my-top">
			<p class="kp-mt-nav">
				<a href="" v-show="false"><img src="../../assets/notice.png" alt=""></a>
				<router-link to="/my/set"><img src="../../assets/set.png"></router-link>
			</p>
			<div class="kp-info">
				<div class="kp-i-left fl" @click="is_login?isLogin('/my/personalInfo'):isLogin('/login')">
					<img :src="headerimg" :onerror="errorImg" alt="" v-if="userinfo.headPortrait">
					<img src="../../assets/face.png" alt="" v-else>
				</div>
				<div class="kp-i-right fl" v-if="!is_login">
					<router-link to="/login">
						<h2>登录</h2>
						<p>点此编辑信息</p>
					</router-link>
				</div>
				<div class="kp-i-right fl" v-else>
					<router-link to="/my/personalInfo">
						<h2>{{userinfo.nickName}}</h2>
						<p>点此编辑信息</p>
					</router-link>
				</div>
			</div>
		</header>
		<!-- //三个按钮 -->
		<section class="kp-my-nav3 mb-18">
			<ul>
				<li @click="order">
					<span><img src="../../assets/nav-my-1.png" /></span>
					<p>我的订单</p>
				</li>
				<li @click="isLogin('/my/wallet')">
					<span><img src="../../assets/nav-my-2.png" /></span>
					<p>我的钱包</p>
				</li>
				<li v-show="false">
					<router-link to="/my/sign">
						<span><img src="../../assets/nav-my-3.png" /></span>
						<p>我的签到</p>
					</router-link>
				</li>
			</ul>
		</section>
		<!-- //添加游记 -->
		<section class="kp-post-travels mb-18" style="display: none;">
			<h3>我的游记</h3>
			<a href="">发表游记</a>
		</section>
		<!-- //我的app -->
		<section class="kp-app mb-18">
			<h3>我的应用</h3>
			<div class="kp-app-list">
				<ul>
					<li v-show="false">
						<span><img src="../../assets/app-1.png" /></span>
						<p>我的预约</p>
					</li>
					<li @click="isLogin('/my/message')">
						<span><img src="../../assets/app-2.png" /></span>
						<p>常用信息</p>
					</li>
					<li @click="inviteFriend">
						<span><img src="../../assets/app-3.png" /></span>
						<p>邀请好友</p>
					</li>
					<li @click="isLogin('/my/coupon/couponList')">
						<span><img src="../../assets/app-4.png" /></span>
						<p>优惠券</p>
					</li>
					<li v-show="false">
						<span><img src="../../assets/app-5.png" /></span>
						<p>我的游记</p>
					</li>
					<li v-show="false">
						<span><img src="../../assets/app-6.png" /></span>
						<p>全部评论</p>
					</li>
					<li v-show="false">
						<span><img src="../../assets/app-7.png" /></span>
						<p>我的客服</p>
					</li>
					<li v-show="false">
						<span><img src="../../assets/app-8.png" /></span>
						<p>加盟合作</p>
					</li>
				</ul>
			</div>
		</section>
		<section class="kp-logo-bg">
			<img src="../../assets/logo-my.png" alt="">
		</section>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from "vuex";
	import { Login } from "../../api/api.js"
	export default {
		data() {
			return {
				is_login: false,
				headerimg: '',
				errorImg:'this.src="' + require('../../assets/face.png') + '"',
			}
		},
		mounted() { //载入后执行
			//console.log(this.userinfo)
			//console.log(this.userinfo.userID)
			if(this.userinfo && (this.userinfo.userID !== 'undefined')) {
				this.is_login = true
			} else {
				this.is_login = false
			}
			this.$store.commit('MY_TABFLAG');
			if(this.userinfo.headPortrait) {
				//正式
				var url = this.$baseUrl.environment ? 'http://img.kpcx179.com/' : 'http://imgtest.kpcx179.com/';
				this.headerimg = url + this.userinfo.headPortrait;
			}
		},
		created() { //创建后

		},
		watch: { //监听放置

		},
		methods: { //方法放置
			isLogin(url) {
				if(this.userinfo.userID) {
					this.$router.push({
						path: url,
						query: {}
					})
				} else {
					this.$router.push({
						path: '/login',
					})
				}
			},
			order() {
				if(this.userinfo.userID) {
					this.$router.push({
						path: '/my/order',
						query: {
							'order': 'order'
						}
					})
				} else {
					this.$router.push({
						path: '/login',
					})
				}
			},
			inviteFriend() {
				if(this.userinfo.userID) {
					window.location.href = 'http://h6.kpcx179.com/appOther/couponApp/invitation.html?code=' + this.userinfo.phone
				} else {
					this.$router.push({
						path: '/login',
					})
				}
			}
		},
		computed: mapGetters([
			'userinfo',
			'isEvenOrOdd'
		]),
	}
</script>

<style scoped>
	.kp-my {
		height: 100%;
		background: #f4f5f9;
	}
	
	.kp-my-top {
		height: 355px;
		background: url(../../assets/my-bg.png) no-repeat center center;
		background-size: 750px 355px;
	}
	
	.kp-mt-nav {
		text-align: right;
		padding-top: 22px;
		padding-right: 47px;
		padding: 22px 47px 67px 0;
	}
	
	.kp-mt-nav a {
		display: inline-block;
		margin-left: 50px;
	}
	
	.kp-mt-nav a img {
		width: 42px;
		height: 42px;
	}
	
	.kp-info {
		padding: 0 44px;
	}
	
	.kp-info a {
		display: block;
	}
	
	.kp-i-left {
		width: 110px;
		height: 110px;
		border-radius: 50%;
	}
	
	.kp-i-left img {
		width: 110px;
		height: 110px;
		border-radius: 50%;
	}
	
	.kp-i-right {
		padding-left: 32px;
	}
	
	.kp-i-right h2 {
		padding-top: 16px;
		font-size: 40px;
		color: #fff;
	}
	
	.kp-i-right p {
		font-size: 28px;
		margin-top: 14px;
		color: #fff;
	}
	/* //三个按钮 */
	
	.kp-my-nav3 {
		background: #fff;
		border-radius: 12px;
		width: 709px;
		margin: 0 auto;
		margin-top: -46px;
	}
	
	.kp-my-nav3 ul {
		display: flex;
	}
	
	.kp-my-nav3 ul li {
		flex: 1;
	}
	
	.kp-my-nav3 ul li span {
		padding-top: 45px;
		display: block;
		text-align: center;
		padding-bottom: 17px;
	}
	
	.kp-my-nav3 ul li span img {
		width: 52px;
		height: 52px;
	}
	
	.kp-my-nav3 ul li p {
		font-size: 28px;
		text-align: center;
		color: #333;
		padding-bottom: 38px;
	}
	/* //添加游记 */
	
	.kp-post-travels {
		background: #fff;
		border-radius: 12px;
		width: 709px;
		margin: 0 auto;
		padding-bottom: 32px;
	}
	
	.kp-post-travels h3 {
		padding: 45px 0 24px 32px;
		font-size: 32px;
		color: #333;
		font-weight: 200;
	}
	
	.kp-post-travels a {
		display: block;
		width: 152px;
		height: 65px;
		border-radius: 33px;
		margin: 0 auto;
		background: #ffa506 url(../../assets/edit.png) no-repeat 40px center;
		background-size: 32px 31px;
		padding-left: 92px;
		line-height: 65px;
		font-size: 26px;
		color: #fff;
	}
	/* //我的app */
	
	.kp-app {
		background: #fff;
		border-radius: 12px;
		width: 709px;
		margin: 0 auto;
	}
	
	.kp-app h3 {
		padding: 45px 0 34px 32px;
		font-size: 32px;
		color: #333;
		font-weight: 200;
	}
	
	.kp-app-list ul:after {
		content: "";
		display: block;
		clear: both;
		overflow: hidden;
	}
	
	.kp-app-list ul li {
		width: 33.33%;
		float: left;
		margin-bottom: 36px;
	}
	
	.kp-app-list ul li span {
		display: block;
		text-align: center;
		padding-bottom: 17px;
	}
	
	.kp-app-list ul li span img {
		width: 52px;
		height: 52px;
	}
	
	.kp-app-list ul li p {
		font-size: 28px;
		text-align: center;
		color: #666;
	}
	
	.kp-logo-bg {
		padding-top: 37px;
		padding-bottom: 158px;
		text-align: center;
	}
	
	.kp-logo-bg img {
		width: 206px;
		height: 84px;
	}
</style>